<template>
  <div class="title">
    <!-- 搜索 -->
    <el-row>
      <el-col :span="3">
          <el-button type="success" round @click="listpb">查看图片列表</el-button>
      </el-col>
      <el-col :span="4"  >
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
        </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-input :placeholder="value" v-model='keyWords' style="width:100%"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click='search'>搜索</el-button>
      </el-col>
    </el-row>
    <!-- 列表显示 -->
    <div class="container_table">
      <el-table :data="tableDataShow.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%">
        <el-table-column prop="cfId" label="活动Id"></el-table-column>
        <el-table-column prop="cfName" label="活动名称" width="200"></el-table-column>
        <el-table-column prop="cfCreateTime" label="发起时间"></el-table-column>
        <el-table-column prop="cfDeadline" label="结束时间"></el-table-column>
        <el-table-column prop="cfAlreadyAmount" label="已筹金额"></el-table-column>
        <el-table-column prop="cfTotalAmount" label="所需金额"></el-table-column>
        <el-table-column label="查看详情" prop="cfId">
          <template slot-scope="scope">
            <el-button type="primary" @click="cfSelect(scope.row)">点击连接</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" @current-change="current_change" :total="total"></el-pagination>
    </div>
    <!-- 详情 -->
    <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :fullscreen="true" :append-to-body="true" :destroy-on-close="true">
      <cf-details v-bind:cfId="this.cfIdSelect"></cf-details>
    </el-dialog>
    <!-- 瀑布流样式列表 -->
    <el-dialog :visible.sync="listDialog" v-if="listDialog" :fullscreen="true" :append-to-body="true" :destroy-on-close="true">
      <list-pb v-bind:tableData="this.tableData"></list-pb>
    </el-dialog>
  </div>
</template>

<script>
import cfDetails from '../details/cfDetails.vue';
import listPb from './listpb.vue'
import { getCF } from 'network/dream.js';
export default {
  name: 'list11',
  data() {
    return {
      options: [
        {
          value: '按活动ID搜索',
          label: '按活动ID搜索'
        },
        {
          value: '按活动名称搜索',
          label: '按活动名称搜索'
        }
      ],
      keyWords:'',
      value: '按活动ID搜索',
      criteria: '', //搜索条件
      select: '', //搜索下拉菜单选项
      cfIdSelect: '', //选中详情
      dialogVisible: false, //详情弹出
      listDialog:false,//瀑布流样式列表显示
      total: 100, //默认数据总数
      pagesize: 5, //每页的数据条数
      currentPage: 1, //默认开始页面
      tableData: [],
      tableDataShow:[]
    };
  },
  components: {
    cfDetails,listPb
  },
  created() {
    //this.test();
    this.crowdFunding();
  },
  mounted() {},
  methods: {
    //测试
    test(){
      //假数据测试用
      let f1 = {
        cfId: '1415876841121538055',
        cfName: '救救神仙',
        username: '15136316036',
        cfIntroduce: '啊啊啊啊啊啊啊啊啊啊啊啊啊,好可怜的小神仙啊',
        cfImage: "https://img2.baidu.com/it/u=1974586406,3020856985&fm=26&fmt=auto&gp=0.jpg",
        cfAuthentication: true,
        cfTotalAmount: 16000,
        cfAlreadyAmount: 500,
        cfCreateTime: '2021-07-16',
        cfDeadline: '2021-07-19',
        cfTag1: true,
        cfTag2: true,
        cfTag3: true,
        cfTag4: true,
        status: 0
      };
      let z1 = JSON.stringify(f1);
      z1 = JSON.parse(z1);
      for(let i=0;i<5;i++){
        this.tableData.push(z1);
      }
      let f2 = {
        cfId: '1415876841121538089',
        cfName: '救救马飞',
        username: '15136316036',
        cfIntroduce: '为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么为什么',
        cfImage: "https://img1.baidu.com/it/u=2958200261,1539584694&fm=26&fmt=auto&gp=0.jpg",
        cfAuthentication: true,
        cfTotalAmount: 16000,
        cfAlreadyAmount: 500,
        cfCreateTime: '2021-07-16',
        cfDeadline: '2021-07-19',
        cfTag1: true,
        cfTag2: true,
        cfTag3: true,
        cfTag4: true,
        status: 0
      };
      let z2 = JSON.stringify(f2);
      z2 = JSON.parse(z2);
      for(let i=0;i<5;i++){
        this.tableData.push(z2);
      }
      let f3 = {
        cfId: '1415876841121538012',
        cfName: '救救啊隆',
        username: '15136316036',
        cfIntroduce: '不可以啊雅蠛蝶不可以啊雅蠛蝶不可以啊雅蠛蝶不可以啊雅蠛蝶不可以啊雅蠛蝶不可以啊雅蠛蝶不可以啊雅蠛蝶',
        cfImage: "https://img0.baidu.com/it/u=2268503557,3209119056&fm=26&fmt=auto&gp=0.jpg",
        cfAuthentication: true,
        cfTotalAmount: 16000,
        cfAlreadyAmount: 500,
        cfCreateTime: '2021-07-16',
        cfDeadline: '2021-07-19',
        cfTag1: true,
        cfTag2: true,
        cfTag3: true,
        cfTag4: true,
        status: 0
      };
      let z3 = JSON.stringify(f3);
      z3 = JSON.parse(z3);
      for(let i=0;i<5;i++){
        this.tableData.push(z3);
      }
      this.tableDataShow=this.tableData;
      this.total = this.tableData.length * 2;
      return
      // 到这里为止
    },
    //点击搜索
    search(){
      if(this.keyWords){
        if(this.value=='按活动ID搜索'){
        this.currentPage=1
        let filterKeywords = this.keyWords.trim();
        let filerReasource = this.tableData.filter(item => { //过滤全部数据
                            if (item.cfId.includes(filterKeywords)) {
                                return item
                            }
                        })
        this.tableDataShow=filerReasource
        this.total=filerReasource.length*2
      }else if(this.value=='按活动名称搜索'){
        this.currentPage=1
        let filterKeywords = this.keyWords.trim();
        let filerReasource = this.tableData.filter(item => { //过滤全部数据
                            if (item.cfName.includes(filterKeywords)) {
                                return item
                            }
                        })
        this.tableDataShow=filerReasource
        this.total=filerReasource.length*2
      }
      }else{
         this.tableDataShow=this.tableData
         this.total = this.tableData.length * 2;
      }
    },
    //选择查看列表详情
    cfSelect(row) {
      this.cfIdSelect = row.cfId;
      this.dialogVisible = true;
    },
    //查看瀑布流样式列表
    listpb(){
      this.listDialog=true;
    },
    //请求数据
    crowdFunding() {
      getCF()
        .then(res => {
          this.tableData = res;
          this.tableDataShow=this.tableData;
          this.total = this.tableData.length * 2;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //分页
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

<style></style>
